<!--
 * @Description: 控件组件（适用范围：basergrid组件及其衍生组件）
 * @Version: 2.0
 * @Autor: wiz
 * @Date: 2024-05-04 08:47:37
 * @LastEditors: swc shanwenchao12138@163.com
 * @LastEditTime: 2025-03-22 17:28:43
-->

<template>
  <div class="init-container">
    <div class="comp-container x-scroll">
      <span class="comp-item" v-for="(item, idx) of comps" :key="idx">
        <component
          :is="item.currentComponent"
          v-bind="{ componentProps: item.componentProps }"
          @some-event="handleEvent"
        />
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import { T_srv, Tsrv, ifs, ts, vue } from '@/services';
import { N_input } from '@/types';
import cButton from './comps/button.vue';
import cProgress from './comps/schedule.vue';

@T_srv.comp({
  components: {
    cButton,
    cProgress
  }
})
export default class oControl extends vue {
  @T_srv.prop() renderOpts: N_input.I_renderOpts;

  @T_srv.prop() params: any;

  @T_srv.watch('lastestValue')
  onParamsChange(v) {
    let iV;
    let nV;
    Tsrv.utils.isJSONString(this.initialValue)
      ? (iV = this.initialValue)
      : (iV = JSON.stringify(this.initialValue));
    Tsrv.utils.isJSONString(v) ? (nV = v) : (nV = JSON.stringify(v));
    if (iV !== nV) {
      // this.loadConfig();
    }
  }

  /* 组件名 */
  private name: string = 'oControl';

  private TCompCfg: ifs.I_compCfg = new ts.T_compCfg(this.loaded);

  public comps = [];

  private value: { cmd: number; data: any } = {
    cmd: null,
    data: null
  };

  private columnName: string = null;

  public componentProps: N_input.I_componentProps = {
    oControl: this,
    params: null,
    renderOpts: null,
    config: null
  };

  private initialValue: any = null;

  get lastestValue() {
    return this.params.row[this.params.column.property];
  }

  created() {
    this.init();
  }

  mounted() {}

  destroyed() {}

  private init() {
    this.columnName = this.params.column.property;
    this.componentProps.params = this.params;
    this.componentProps.renderOpts = this.renderOpts;
    this.initialValue = Tsrv.utils.clone(
      this.params.row[this.params.column.property]
    );
    this.loadConfig();
  }

  private loadConfig() {
    const val = Tsrv.utils.clone(this.params.row[this.params.column.property]);
    Tsrv.utils.isJSONString(val)
      ? (this.value = JSON.parse(val))
      : (this.value = val);
    if (this.value) {
      this.TCompCfg.setCmd(this.value.cmd).setCfgData(this.value.data);
      this.TCompCfg.loadData();
    }
  }

  public loaded(d: Array<ifs.I_compCfgDetailComps>) {
    this.comps.length = 0;
    d.forEach(el => {
      let compName = '';
      switch (el['type']) {
        case 'button':
          compName = 'cButton';
          break;
        case 'progress':
          compName = 'cProgress';
          break;
        default:
          console.error('未定义类型');
      }
      this.componentProps.config = el;

      this.comps.push({
        currentComponent: compName,
        componentProps: {
          oControl: this,
          // params: this.params,
          // renderOpts: this.renderOpts,
          config: el
        }
      });
    });
  }

  public handleEvent(e) {}

  /**
   * 手动聚焦输入框
   */
  public focus() {}

  /**
   * 重置为空
   */
  public resetValue() {}

  /**
   * 设置值
   * @param val @default undefined 值
   */
  public setValue(val?: any) {}

  /**
   * 获取值
   *
   */
  public getValue(): any {}
}
</script>
<style lang="scss" scoped>
.init-container {
  background-color: transparent;
}
.x-scroll {
  &::-webkit-scrollbar {
    height: 5px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #e9e7e7;
  }
  &::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
  }
}
.comp-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /* 主轴方向上居中对齐 */
  align-items: center; /* 交叉轴方向上居中对齐 */
  flex-wrap: nowrap;
  // overflow-x: auto;
  overflow-y: hidden;
  .comp-item {
    margin: 0 6px; /* 左右各 10px 的间隔 */
  }
}
</style>
